<template>
    <!-- <input type="text" v-model="inputValue" /> -->
    <div class="todo-list">
        <div class="header">
            <h2>TodoList</h2>
            <div class="box"><input type="text" placeholder="请输入待办事项..." class="input" v-model="inputText">
                <button class="btn" @click="addTodo">添加</button>
            </div>
        </div>
    </div>
    <slot></slot>

</template>

<script setup>
import { ref } from 'vue';
import useChildren from '@/hooks/useChildren';
const inputText = ref('');
const inputValue = ref({});
const addTodo = () => {
    if (inputText.value.trim() !== '') {
        const key = Date.now().toString(); // 使用时间戳作为唯一键
        inputValue.value[key] = { text: inputText.value, completed: false }; // 添加对象
        inputText.value = '';
    }
}
const{linkChildren} = useChildren('InputFrame');
linkChildren({
    inputValue,
})

</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}


.header {
    background-color: #0b87ff;
    text-align: center;
    padding: 5px 0 10px;
    color: #f0f8ff
}

.header .box {
    margin-top: 10px;
    display: flex;
    gap: 5px;
    justify-content: center
}

.header .input {
    width: 300px;
    height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    outline: none;
    border: solid 1px white
}

.header .btn {
    display: inline-block;
    width: 80px;
    height: 30px;
    background-color: #eee;
    color: #0b87ff;
    line-height: 30px;
    border: none;
    border-radius: 3px
}
</style>